<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <span>订单管理</span>
        <span class="date-label">{{ currentDate }}</span>
        <el-button type="primary" link @click="navigateTo('/order')">订单明细</el-button>
      </div>
    </template>
    <el-row :gutter="20" class="overview-box">
      <el-col :span="4" class="data-item">
        <p class="tit">待接单</p>
        <p class="num">{{ orderviewData.waitingOrders || 0 }}</p>
      </el-col>
      <el-col :span="4" class="data-item">
        <p class="tit">待派送</p>
        <p class="num">{{ orderviewData.deliveredOrders || 0 }}</p>
      </el-col>
      <el-col :span="4" class="data-item">
        <p class="tit">已完成</p>
        <p class="num">{{ orderviewData.completedOrders || 0 }}</p>
      </el-col>
      <el-col :span="4" class="data-item">
        <p class="tit">已取消</p>
        <p class="num">{{ orderviewData.cancelledOrders || 0 }}</p>
      </el-col>
      <el-col :span="4" class="data-item">
        <p class="tit">全部订单</p>
        <p class="num">{{ orderviewData.allOrders || 0 }}</p>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

interface IOrderOverview {
  waitingOrders?: number;
  deliveredOrders?: number;
  completedOrders?: number;
  cancelledOrders?: number;
  allOrders?: number;
}

withDefaults(defineProps<{
  orderviewData: IOrderOverview
}>(), {
  orderviewData: () => ({})
});

const router = useRouter();
const getFormattedDate = () => new Date().toISOString().split('T')[0];
const currentDate = ref(getFormattedDate());
const navigateTo = (path: string) => router.push(path);
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  align-items: center;
  width: 100%;
  span:first-child {
    font-size: 16px;
    font-weight: 600;
  }
  .date-label {
    font-size: 14px;
    color: #999;
    margin-left: auto;
    margin-right: 20px;
  }
}

.overview-box {
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.data-item {
  .tit {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
  }
  .num {
    font-size: 24px;
    font-weight: bold;
  }
}
</style>
